<!--  -->
<template>
  <div class="pieBox">
    <div class="main-contain">
      <canvas :id="'canvas' + canvasId" width="120" height="120"></canvas>
    </div>
    <div class="endTip">{{ title }}</div>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "pieComponent",
  components: {},
  props: ["config"],
  data() {
    //这里存放数据
    return {
      dom: null,
      timer: null,
      speed: 0,
      num: 0,
      canvas: null,
      fontSize: 20,
      insertContent: "198",
      title:"珂珂珂珂",
      color:"#1AC757",
      canvasId:"hbhp"
    };
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.num = Math.random();
  this.color=this.config.color
  this.fontSize=this.config.color
  this.insertContent=this.config.insertContent
  this.canvasId=this.config.canvasId
  this.title=this.config.title
},
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    drawCircle(ctx, config) {
      const {
        x,
        y,
        radius,
        startAngle,
        endAngle,
        color,
        lineWidth,
        type,
      } = config;
      ctx.beginPath();
      ctx.arc(x, y, radius, startAngle, endAngle, false);
      // 设定曲线粗细度
      ctx.lineWidth = lineWidth;
      if (type == 1) {
        var jb = ctx.createLinearGradient(0, 0, 260, 0);
        jb.addColorStop(0, this.color);
        jb.addColorStop(1, this.color); //参数为0<stop<1,color
        // 给曲线着色
        ctx.strokeStyle = jb;
      } else {
        // 给曲线着色
        ctx.strokeStyle = "rgba(0,0,0,.3)";
      }

      // 连接处样式
      ctx.lineCap = "round";
      // 给环着色
      ctx.stroke();
      ctx.closePath();
    },
    circle(percent) {
      const { width, height } = this.canvas;
      const ctx = this.canvas.getContext("2d"); //加上!告诉ts我有信心它不为空
      // // 清除画布
      ctx.clearRect(0, 0, width, height);
      // // 保存
      // ctx.save();
      // ctx.globalAlpha = this.speed / num;
      /* 填充文字 */
      ctx.font = "12px Microsoft YaHei";
      /* 文字颜色 */
      var jb = ctx.createLinearGradient(0, 0, 200, 0);
      jb.addColorStop(0, "rgb(95,102,106,1)");
      jb.addColorStop(1, "rgb(95,102,106,1)"); //参数为0<stop<1,color
      ctx.fillStyle = jb;
      const ratioStr = `占比${(parseFloat(percent) * 100).toFixed(0)} %`;
      // 拿到文本内容的像素相关信息 单位长度(px)
      const measureText = ctx.measureText(ratioStr);
      /* 插入文字，后面两个参数为文字在画布中的坐标点 */
      /* 此处注意：text.width获得文字的宽度，然后就能计算出文字居中需要的x值 */
      ctx.fillText(
        ratioStr,
        (width - measureText.width) / 2,
        height / 2 + 20
      );

      /* 填充百分比 */
      ctx.font = `${this.fontSize}px Microsoft YaHei`;
      var jb2 = ctx.createLinearGradient(0, 0, 200, 0);
      jb2.addColorStop(0, "#fff");
      jb2.addColorStop(1, "#fff"); //参数为0<stop<1,color
      ctx.fillStyle = jb2;
    //   const ratioStr = `${(parseFloat(percent) * 100).toFixed(0)} %`;
      const text = ctx.measureText(this.insertContent);
      ctx.fillText(this.insertContent, (width - text.width) / 2, height / 2 - 2);

      /* 开始圆环 */
      const circleConfig = {
        /* 圆心坐标 */
        x: width / 2,
        y: height / 2,
        /* 半径，下方出现的150都是半径 */
        radius: width / 2 - 15,
        /* 环的宽度 */
        lineWidth: 10,
        /* 开始的度数-从上一个结束的位置开始 */
        startAngle: 0, // 注意这里的0是3点钟方向，而非12点方向，和数学里的不一样
        /* 结束的度数 */
        endAngle: 360,
        color: "rgba(0,0,0,.3)",
        type: 0,
      };
      /* 灰色的圆环 */
      this.drawCircle(ctx, circleConfig);
      if (this.num > 0) {
        const circleConfig2 = {
          ...circleConfig,
          startAngle: 0, // 注意这里的0是3点钟方向，而非12点方向，和数学里的不一样
          /* 结束的度数 */
          endAngle: (Math.PI / 180) * 360 * this.speed,
          color: "green",
          type: 1,
        };
        this.drawCircle(ctx, circleConfig2);
      }

      this.timer = window.requestAnimationFrame(() => {
        //在1秒内完成一次的进度显示
        if (this.speed > this.num) {
          window.cancelAnimationFrame(this.timer);
          return;
        }
        this.circle(this.speed);
      });
      this.speed += 0.01;
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let class2 = `#canvas${this.canvasId}`;
    this.dom = document.querySelector(".main-contain");
    this.canvas = document.querySelector(class2);
    this.circle(this.speed);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.pieBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .main-contain{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .endTip{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
